<template>
  <div>
    <!--  -->
    <van-nav-bar title="登录" right-text="注册" @click-right="onClickRight" />

    <!--  -->
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名：" placeholder="用户名"
        :rules="[{ pattern: /^[\w-]{4,16}$/, message: '请填写用户名' }]" />
      <van-field v-model="password" :type="passwordType" name="密码" label="密码：" placeholder="密码"
        :rules="[{ pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/, message: '请填写正确密码' }]">
        <template slot="right-icon">
          <span class="solts" @click="switchPasswordType">
            <van-icon name="eye-o" v-if="passwordType === 'password'" />
            <van-icon name="closed-eye" v-else />
          </span>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import localforage from 'localforage';

export default {
  name: 'Vue2Login',

  data() {
    return {
      username: '',
      password: '',
      passwordType: 'password',
      isLoggedIn: false,
    };
  },

  mounted() {

  },

  methods: {
    onClickRight() {
      this.$router.replace("/Enroll")
    },

    onSubmit() {

      // localforage.getItem('userList').then(result => {
      //   // 读取用户列表
      //   if (!result) {
      //     this.$toast({
      //       message: '您未注册！',
      //       icon: 'https://imgs.qiubiaoqing.com/qiubiaoqing/imgs/62d45cdc270fbOUI.gif',
      //     });
      //     return;
      //   }
      //   let LoginNamePassword = false;
      //   //添加了一个名为isUsernameDuplicate的布尔变量，用于标记是否找到了重复的用户名。
      //   //在遍历result时，如果发现有相同的用户名，就将isUsernameDuplicate设置为true。
      //   if (result !== null) {
      //     result.forEach(user => {
      //       if (this.username === user.username && this.password === user.password) {
      //         LoginNamePassword = user;
      //       }
      //     });
      //     //用户名不重复且两次输入的密码相同
      //     if (LoginNamePassword) {
      //       // this.LoginNamePassword = true;
      //       localforage.setItem('loginStatus', true);
      //       this.$toast.success("登陆成功！");
      //       this.$router.replace("/");
      //       localforage.setItem('loginTime', new Date().getTime())
      //       console.log(LoginNamePassword);
      //     } else {
      //       this.$toast.fail("用户名或密码错误！")
      //     }
      //   }

      // });

      localforage.getItem('userList').then(result => {
        if (!result) {
          this.$toast({
            message: '您未注册！',
            icon: 'https://imgs.qiubiaoqing.com/qiubiaoqing/imgs/62d45cdc270fbOUI.gif',
          });
          return;
        }
        let userInfo = null;
        // 在遍历result时，如果发现有相同的用户名和密码，就将userInfo设置为该用户的信息。
        result.forEach(user => {
          if (this.username === user.username && this.password === user.password) {
            userInfo = user;
          }
        });
        // 如果找到了匹配的用户信息
        if (userInfo) {
          localforage.setItem('loginStatus', true);
          this.$toast.success("登陆成功！");
          this.$router.replace("/");
          localforage.setItem('loginTime', new Date().getTime());
          localforage.setItem('currentUser', userInfo); // 将当前登录的用户信息存储到localforage中
        } else {
          this.$toast.fail("用户名或密码错误！")
        }
      });






















      // if (this.password !== this.password1) {
      //   this.$toast.fail("2次密码必须一致")
      // };
      // localforage.getItem('userList').then(result => {
      //   // 读取用户列表
      //   if (!result) {
      //     this.$toast({
      //       message: '您未注册！',
      //       // icon: '../../assets/maomao.png',
      //       icon: 'https://imgs.qiubiaoqing.com/qiubiaoqing/imgs/62d45cdc270fbOUI.gif',
      //       // icon: '@/assets/img/maomao.png',
      //     });
      //   } else {
      //     result.forEach(user => {
      //       if (this.username === user.username && this.password === user.password) {
      //         this.isLoggedIn = true;
      //         localforage.setItem('loginStatus', true);
      //         this.$toast.success("登陆成功！");
      //         this.$router.replace("/");
      //         // this.userList.push({ loginTime: new Date().getTime() });
      //         // // 判断是否存在loginTime属性
      //         // if (user.hasOwnProperty('loginTime')) {
      //         //   // 如果存在loginTime属性，则删除原来的属性，并添加一个新的loginTime属性
      //         //   delete user.loginTime;
      //         //   this.userList.push({ loginTime: new Date().getTime() });
      //         // } else {
      //         //   // 如果不存在loginTime属性，则添加一个新的loginTime属性
      //         //   this.userList.push({ loginTime: new Date().getTime() });
      //         // }
      //       } else {
      //         this.$toast.fail("用户名或密码错误！");
      //       }
      //     });
      //   }
      // }).catch(err => {
      //   // 处理读取失败
      //   console.error('读取用户列表时发生错误：', err);
      // });
      // // 计算延迟时间为当前时间加上20天的时间戳
      // let delayTime = new Date().getTime() + 1000 * 30;//20 * 24 * 60 * 30 * 1000
      // setTimeout(function () {
      //   localforage.removeItem('loginStatus').then(function () {
      //     // 当值被移除后，此处代码运行
      //     console.log('loginStatus值已删除');
      //   }).catch(function (err) {
      //     // 当出错时，此处代码运行
      //     console.log(err);
      //   });
      // }, delayTime - new Date().getTime());
      // console.log(delayTime - new Date().getTime());

      // console.log('submit', values);
    },
    switchPasswordType() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
    }

  },

};
</script>
<style scoped></style>